﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="//cdn.bootcss.com/jquery.form/3.51/jquery.form.min.js"></script>
    <script>

        $(function () {
            var options = {
                success: function (data) {
                    $("#responseText").text(data);
                }
            };

            $("#form1").ajaxForm(options);

            $("#btnAjaxSubmit").click(function () {
                $("#form1").ajaxSubmit(options);
            });
        });

        function log(msg) {
            console.log(msg);
            $(document.body).append("<pre>" + msg + "</pre>");
        }
    </script>
</head>
<body>
    <form id="form1" action="pro.ashx" method="post">
    <table border="1">
        <caption>jQuery.form.js异步提交方式</caption>
        <tr>
            <td>用户名：</td>
            <td>
                <input type="text" name="loginName" /></td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center">
                <button id="btnAjaxSubmit" type="button">ajaxSubmit提交</button>
                &nbsp;
                <input id="btnAjaxForm" type="submit" value="ajaxForm提交" />
            </td>
        </tr>
    </table>
    <div id="responseText"></div>
</form>
</body>
</html>
